import {Component, ComponentProps, VueComponent, Mut, Hook} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInput, NSwitch} from "naive-ui";
import LogicFlow from '@logicflow/core';

interface IProps {
  logicFlow: LogicFlow,
  elementId: string,
  elementName: string,
  elementType: string,
}
@Component()
export default class ConfigUsualPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    logicFlow: {},
    elementId: {},
    elementName: {},
    elementType: {},
  }

  public static tabKey = "Usual"
  public static tabName = "常规配置"

  private getIdFromElement = ():string=>this.props.logicFlow.getDataById(this.props.elementId).id as string;
  private getNameFromElement = ():string=>{
    const text = this.props.logicFlow.getDataById(this.props.elementId).text
    return typeof(text)==='object'?text.value:text as string;
  }
  private getDocumentation = ():string=>{return (this.props.logicFlow.getProperties(this.props.elementId) as any)['documentation'] as string;}


  @Mut() private state = {
    id: this.getIdFromElement(),
    name: this.getNameFromElement(),
    documentation: this.getDocumentation(),
  }

  private updateId = (value:string):void=>{
    const { logicFlow } = this.props;
    const eleModel = logicFlow.getModelById(this.state.id);
    const changeId = eleModel.BaseType==='node'?logicFlow.changeNodeId:logicFlow.changeEdgeId;
    this.state.id = value;
    changeId(eleModel.id,value);
  }

  private updateName = (value:string):void=>{
    this.state.name = value;
    this.props.logicFlow.updateText(this.state.id,value);
  }

  private updateDocumentation = (value:string):void=>{
    this.state.documentation = value;
    const properties = this.props.logicFlow.getProperties(this.state.id) as any;
    this.props.logicFlow.setProperties(this.state.id,{...properties,documentation:value});
  }

  @Hook('BeforeUpdate')
  onBeforeUpdate(){
    this.state = {
      id: this.getIdFromElement(),
      name: this.getNameFromElement(),
      documentation: this.getDocumentation(),
    }
  }

  render(){
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="元素ID"><NInput value={this.state.id} onUpdateValue={this.updateId} /></NFormItemGi>
          <NFormItemGi label="元素名称"><NInput value={this.state.name} onUpdateValue={this.updateName} /></NFormItemGi>
          <NFormItemGi label="描述文档"><NInput value={this.state.documentation} onUpdateValue={this.updateDocumentation} /></NFormItemGi>
        </NGrid>
      </NForm>
    )
  }
}